<style rel="stylesheet/scss" lang="scss" scoped>
.pds-form-item {
  display: inline-block;
  width: 33%;
}

.pds-form-textarea {
  width: 80%;
}
.col-25 {
  width: 25%;
}
.label-block {
  display: inline-block;
  width: 100%;
}
.img-list {
  overflow: hidden;
  .img-item {
    width: 150px;
    height: 150px;
    float: left;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 20px;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: 0;
      transition: all 0.3s;
    }
    i {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 30px;
      height: 30px;
      color: #fff;
      font-size: 25px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s;
    }
    &:hover {
      .bg {
        opacity: 0.5;
      }
      i {
        opacity: 1;
      }
    }
  }
}
</style>
<template>
  <div class="">
    <el-row>
      <el-form :model="detail" label-width="140px" v-for="(item,index) in basicInfo" :key="'detail' + index">
        <el-col :span="('upload,textarea,checkbox-remark'.indexOf(item.element) != -1||item.col==100) ? 24 : 8">
          <el-form-item :label="$t(item.label)+'：'" v-show="!item.hidden" :label-width="item.labelWidth||'140px'">
            <div v-if="'input,textarea,datePicker'.indexOf(item.element)!= -1">{{detail[item.name] || ''}}{{item.append || ''}}</div>
            <div v-if="item.element == 'select' && item.type == 'multiple'||item.element=='checkbox'">{{getValues(item.options, item.value || 'value', item.labelName || (lang=='en' ? 'labelEnUs':'labelZhCh'), detail[item.name])}}</div>
            <div v-if="item.element == 'select' && item.type != 'multiple'||item.element == 'radio'">{{getValue(item.options, item.value || 'value', item.labelName || (lang=='en' ? 'labelEnUs':'labelZhCh'), detail[item.name])}}</div>
            <div v-if="item.element == 'upload'">
              <div class="img-list">
                <div class="img-item" v-for="(imgItem, imgIndex) in detail[item.name]" :key="'img' + imgIndex">
                  <img :src="baseUrl + '/' + imgItem.url" alt="">
                  <div class="bg"></div>
                  <i class="el-icon-zoom-in" @click="showImg(detail[item.name],imgIndex)"></i>
                </div>
              </div>
            </div>
            <div v-if="item.element == 'checkbox-remark'">
              <span v-for="subItem in getCheckboxRemark(item.options,detail[item.name])" :key="subItem.id" style="margin-right: 10px">
                {{subItem.name + (subItem.remark ? '(' + subItem.remark + ')' : '')}}
              </span>
            </div>
            <div v-if="item.element=='uploadFile'">
              <a :href="baseUrl + '/' + detail[item.fileUrl]" class="upload-tip" target="_blank">{{detail[item.fileName]}}</a>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <img-list v-model="dialogVisible" :img-list="imgArr" :img-index="imgIndex"></img-list>
  </div>
</template>


<script>
import { mapGetters } from 'vuex';
import * as saleApi from '@/api/sale/index';
import ImgList from '../ImgListView/index';
export default {
  name: 'BasicForm',
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  components: {
    ImgList
  },
  props: {
    basicInfo: {
      type: Array,
      default: () => []
    },
    lang: {
      type: String,
      default: 'zh'
    },
    detail: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      baseUrl: process.env.BASE_FILE_URL,
      basicFormRules: {},
      customerList: [],
      props: {
        value: 'code',
        label: this.language == 'en' ? 'nameEn' : 'nameCn'
      },
      dialogVisible: false,
      imgArr: [],
      imgIndex: 0
    };
  },
  created() {
    this.selectChange('colorBoxType')
    this.selectChange('manualColor')
    this.selectChange('insured')
    this.selectChange('hasCoopAgreement')
    this.selectChange('capacitySatisfied')
  },
  methods: {
    /* 单选值查询 */
    getValue(list, keyName, valueName, value) {
      let resStr = '';
      if (list) {
        list.map(item => {
          if (item[keyName] == value) {
            resStr = item[valueName];
          }
        })
      }
      return resStr;
    },
    /* 多选值查询 */
    getValues(list, keyName, valueName, valueList) {
      const resList = [];
      if (list) {
        list.map(item => {
          valueList.map(subItem => {
            if (item[keyName] == subItem) {
              resList.push(item[valueName]);
            }
          })
        })
      }
      return resList.join(',');
    },
    /* 查看图片 */
    showImg(list, index) {
      this.imgArr = list;
      this.imgIndex = index;
      this.dialogVisible = true;
    },
    selectChange(keyName, index, val) {
      // 包材美工设计-彩盒
      if (keyName === 'colorBoxType') {
        const required = this.detail.colorBoxType === 1
        this.basicInfo.map((item, index) => {
          if (item.name === 'boxLength' || item.name === 'boxWidth' || item.name === 'boxHeight') {
            this.$set(this.basicInfo[index], 'hidden', !required);
          }
          if (item.name === 'boxLengthTotal' || item.name === 'boxWidthTotal') {
            this.$set(this.basicInfo[index], 'hidden', required);
          }
        })
      }
      if (keyName === 'manualColor') {
        const required = this.detail.manualColor === 3
        this.basicInfo.map((item, index) => {
          if (item.name === 'manualCoverPageSize' || item.name === 'manualInnerPageSize' || item.name === 'manualCoverPageMaterial' || item.name === 'manualInnerPageMaterial') {
            this.$set(this.basicInfo[index], 'hidden', !required);
          }
          if (item.name === 'manualPageSize' || item.name === 'manualMaterial') {
            this.$set(this.basicInfo[index], 'hidden', required);
          }
        })
      }
      if (keyName === 'insured') {
        const required = this.detail.insured === 1
        this.basicInfo.map((item, index) => {
          if (item.name === 'insuredAmount') {
            this.$set(this.basicInfo[index], 'hidden', !required);
          }
        })
      }
      if (keyName === 'hasCoopAgreement') {
        const required = this.detail.hasCoopAgreement === 1
        this.basicInfo.map((item, index) => {
          if (item.name === 'coopAgreementFileId' || item.name === 'agreementDate' || item.name === 'agreementPeriod') {
            this.$set(this.basicInfo[index], 'hidden', !required);
          }
        })
      }
      if (keyName === 'capacitySatisfied') {
        const required = this.detail.capacitySatisfied != 1
        this.basicInfo.map((item, index) => {
          if (item.name === 'capacityUnsatisfyReason') {
            this.$set(this.basicInfo[index], 'hidden', !required);
          }
        })
      }
    },
    getCheckboxRemark(options, valueArr) {
      const list = [];
      options.map(item => {
        item.isChecked = false;
        valueArr.map(subItem => {
          if (item.id == subItem.certCategoryId) {
            item.isChecked = true;
            if (item.categoryType) {
              item.remark = subItem.remark;
            }
            list.push(item);
          }
        })
      })
      return list;
    }
  }
}
</script>
